<!--文本扩展-->
<template>
  <div v-show="show" style="width: 100%">
    <p
      style="margin-block: 0 0"
      :style="{ color: color, 'font-size': size + 'px', 'text-align': align, 'font-weight': bold }"
    >
      <slot />
    </p>
  </div>
</template>

<script>
  export default {
    name: 'FancyText',
    props: {
      text: {
        type: String,
        default: '',
      },
      show: {
        type: Boolean,
        default: true,
      },
      align: {
        type: String,
        default: 'left',
      },
      color: {
        type: String,
        default: '',
      },
      size: {
        type: Number,
        default: 14,
      },
      bold: {
        type: Number,
        default: 400,
      },
    },
  };
</script>
<style scoped>
  .text-left {
    text-align: left;
  }

  .text-center {
    justify-content: center;
    text-align: center;
  }

  .text-right {
    justify-content: flex-end;
    margin-left: auto;
    text-align: right;
  }
</style>
